<template>
  <el-form ref="form" :model="tel" label-width="90px" class="kxz-callLog__form--service">
    <el-form-item label="问题分类:">
      <el-select v-model="tel.qt1" placeholder="请选择问题" class="sel1" popper-class="kxz-callLog__sel" @change="handleQue1TypeChange">
        <el-option v-for="(item,index) in Pque1" :key="index" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
      <el-select v-model="tel.qt2" placeholder="请选择问题以及分类" class="sel2" popper-class="kxz-callLog__sel" @change="handleQue2TypeChange">
        <el-option v-for="(item,index) in Pque2" :key="index" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="通话内容:">
      <el-input type="textarea" v-model="tel.content" :maxlength="300" placeholder="请输入通话内容(限制在300字以内)"></el-input>
    </el-form-item>
    <el-form-item label="处理状态:">
      <el-select v-model="tel.status" placeholder="请选择状态类型" class="sel3" popper-class="kxz-callLog__sel" @change="handleStatusChange">
        <el-option v-for="(item,index) in opts.status" :key="index" :label="item.name" :value="item.name">
        </el-option>
      </el-select>
    </el-form-item>
    <p class="submitPara">
      <el-button type="primary" @click="handleSubmit">确认提交</el-button>
    </p>
  </el-form>
</template>

<script>
export default {
  name: 'log-form',
  props: {
    Pque1: Array,
    Pque2: Array,
    Pselque1: String,
    Pselque2: [Number,String],
  },
  data() {
    const qt1 = this.Pselque1
    const qt2 = this.Pselque2
    const status = this.$store.getters.handleStatus || '完成'
    const content = this.$store.getters.callMsg.serviceForm.content || ''
    return {
      tel: {
        qt1,
        qt2: qt2 || '',
        content,
        status
      },
      opts: {
        status: [
          { name: '完成' },
          { name: '转工单完成' }
        ]
      }
    }
  },
  computed: {
    custatus() {
      return this.$store.getters.handleStatus
    },
    cuCallMsg(){
      return this.$store.getters.callMsg
    },
  },
  watch: {
    Pselque1(val) {
      this.tel.qt1 = val
    },
    Pselque2(val) {
      this.tel.qt2 = val || ''
    },
    custatus(val) {
      if (val === '') {
        this.tel.status = val || '完成'
        return
      }
    },
    'tel.content'(val){
      const ret = {
        serviceForm:{
          content:val
        }
      }
      this.$store.dispatch('updateCallMsg',ret)
    },
    cuCallMsg(val){
      this.tel.content = val.serviceForm.content
    },
  },
  methods: {
    handleSubmit() {
      const { isSubmitGD } = this.$store.getters.dialog
      const { qt1, qt2, content, status } = this.tel
      if (qt1 === '' || qt2 === '')
        return this.$warn('请选择问题分类')
      if (content === '')
        return this.$warn('请填写通话内容')
      if (status === '')
        return this.$warn('请选择处理状态')
      if (status === '转工单完成' && !isSubmitGD)
        return this.$warn('请通过工单弹出框进行提交')
      this.getCallContent()
    },
    handleQue1TypeChange(val) {
      this.$emit('onSelQue1', val)
    },
    handleQue2TypeChange(val) {
      this.$emit('onSelQue2', val)
    },
    handleStatusChange(val) {
      this.$store.dispatch('updateHandleStatus', val)
      if (val === '转工单完成') {
        this.$emit('onOpen', 6)
      }
    },
    async getCallContent() {
      try {
        const { telMsg } = this.$store.getters.callMsg
        const { dh } = telMsg
        const { qt1, qt2, content, status } = this.tel
        const { data } = await this.$get(this, {
          api: 'ajaxapi/savexx.do',
          data: {
            callcontent: content,
            yiji: qt1,
            erji: qt2,
            state: status,
            dh:dh
          }
        })
        if (data.state === 0 && data.content === true) {
          this.$toast({
            message:'提交成功'
          })
          // 初始化工单状态
          this.$store.dispatch('updateDialog', {
            isSubmitGD: false
          })
          this.$store.dispatch('updateHandleStatus', '')
          //

          //  初始化store 中 callMsg的信息
          const initCallMsg = {
            callType: '',
          }
          let {data, curIndex} = this.$store.getters.callList
          let tmpa = Object.assign([],data)
          console.log('service:',tmpa,curIndex)
          const lastIndex = tmpa.length - 1
          //提交相当于删除通话详情数组,
          if(tmpa.length === 1){
            this.$store.dispatch('updateCallList',{
              data:[],
              curIndex:-1
            })
            this.$store.dispatch('updateCallMsg', initCallMsg)
            this.$router.back()
          }else if(tmpa.length > 1){
            // 如果当前页为最后一页则退回到当前的上一页，否则前进到当前的下一页
            curIndex < lastIndex ? tmpa.splice(curIndex,1) : tmpa.pop()
            curIndex = curIndex < lastIndex ? curIndex : curIndex - 1
            const curCallMsg = tmpa[curIndex]
            this.$store.dispatch('updateCallMsg', curCallMsg)
            this.$store.dispatch('updateCallList',{
              data:tmpa,
              curIndex,
            })
            // 刷新页面
          }
          return
        }
        this.$toast({
          message: '提交失败，请再次提交'
        })
      } catch (e) {
        this.$warn('系统ajaxapi/savexx.do报错')
      }
    },
  }
}
</script>

<style lang="scss">
$bdColor: #dddfe6;
$color: #444;
$inputbgColor:#fafbfc;
$inputColor:#7b8897;
.kxz-callLog__form--service {
  padding: 30px 19px 30px 18px;
  border: 1px solid $bdColor;
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-form-item__label {
    font-size: 16px;
    color: $color;
  }
  .el-input__inner,
  .el-textarea__inner {
    background: $inputbgColor; // color: $inputColor;
  }
  .el-textarea__inner {
    height: 150px;
    border-color: $bdColor !important;
  }
  .el-input__inner {
    width: 322px;
    height: auto;
    padding: 10px 35px 11px 19px;
    border-color: $bdColor !important;
  }
  .sel1 {
    margin-right: 19px;
  }
  .submitPara {
    text-align: center;
  }
  .el-button {
    padding: 12px 45px;
  }
}

// .kxz-callLog__sel {
//   transform: translateY(-6px);
//   box-shadow: none;
//   background: $inputbgColor;
//   border-color:$bdColor;
//   .el-select-dropdown__list{
//     padding:0;
//   }
//   .el-select-dropdown__item {
//     color: #bac1c9;
//     padding:10px 0 11px 19px;
//     height:auto;
//     &.hover{
//       background:#f1f5f8;
//     }
//     &.selected{
//       background:#f1f5f8;
//     }
//   }
// }
</style>
